<template>
  <div class="todo-container">
    <div class="todo-wrap">
      <Header/>
      <Main :todos="todos"/>
      <Footer :done-count="doneCount" :total-count="totalCount"/>
    </div>
  </div>
</template>

<script>

import Header from "@/components/Header";
import Footer from "@/components/Footer";
import Main from "@/components/Main";
import {EventBus} from "@/common/event-bus";

export default {
  name: 'HomeView',
  components: {
    Main,
    Footer,
    Header
  },
  data() {
    return {
      todos: [
        {id: "001", name: "吃饭", done: false},
        {id: "002", name: "睡觉", done: false},
        {id: "003", name: "打游戏", done: false},
      ]
    }
  },

  computed: {
    doneCount() {
      return this.todos.reduce((num, todoObj) => {
        return num + (todoObj.done ? 1 : 0)
      }, 0);
    },
    totalCount() {
      return this.todos ? this.todos.length : 0;
    }
  },

  created() {
    EventBus.$on("addTodo", (data) => {
      this.todos.push(data)
    })

    EventBus.$on("updateTodo", (data) => {
      this.todos.map(todoObj => {
        if (todoObj.id === data.id) {
          todoObj.done = data.done
        }
      })
    })

  }
}
</script>

<style scoped>
.todo-container {
  width: 600px;
  margin: 0 auto;
}

.todo-container .todo-wrap {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
</style>
